<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>
<body>
  <div id='root'></div>
  <script>
    // 写一个生命周期吧
    // optionMergeStrategies 合并策略
    console.log(Vue.config.optionMergeStrategies);

    // 保留原合并策略
    const originalOptionsMergeStrategies = Vue.config.optionMergeStrategies;
    // 定义 exit 方法，使用 created 策略
    originalOptionsMergeStrategies.exit = originalOptionsMergeStrategies.created;

    // 触发通知，执行 exit 函数
    const notify = (name, vm) => {
      const lifeCycles = vm.$options[name];
      if (lifeCycles && lifeCycles.length) {
        lifeCycles.forEach(lc => lc.call(vm));
      }

      // 递归，children 处理
      const children = vm.$children;
      if (children && children.length) {
        children.forEach(child => notify(name, child));
      }
    }

    // 绑定到一个实例
    const bind = vm => {
      window.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'hidden') {
          notify('exit', vm);
        }
      })
    }

    const vm = new Vue({
      el: document.querySelector('#root'),
      template:`<h1>hello world!</h1>`,
      exit() {
        alert('那我走？')
      }
    });

    bind(vm);
  </script>
</body>
</html>